<script setup>
import { useMapStore } from "@/stores/map.js";
import { useChangeMapStore } from "@/stores/changeMap.js";
import { groupBy } from "@/utils/index";

const mapStore = useMapStore();
const changeMapStore = useChangeMapStore();
// 供热wms容器
let gr_tjrd = null; // 天津热电
let gr_jard = null; // 津安热电
let rq_cz = null; // 燃气场站
let rq_fm = null; // 燃气阀门
let rq_jl = null; // 燃气计量设施
let rq_ty = null; // 燃气调压设施
let rq_gx = null; // 燃气管线_西青
// 供热公司对应的wms url
const gr = [
    {
        name: "天津热电",
        url: "",
    },
    {
        name: "津安热电",
        url: "",
    },
];
// 燃气管线对应的wms url
let rq = [];
let ids = {
    // 供热
    gr: [],
    // 燃气
    rq: [],
};
// 监听数据的变化
changeMapStore.$subscribe((args, state) => {
    // console.log("state", state.checkedValue);
    addLayer(state.checkedValue);
});

// 添加wms图层
const addLayer = (checks) => {
    // 清空wms
    clearWMS();
    checks.forEach((element) => {
        if (element.name === "供热") {
            ids.gr.push(element.layers);
        }
        if (element.name === "燃气") {
            ids.rq.push(element.value);
        }
    });
    let URL_BASE;
    Object.keys(ids).forEach((key) => {
        switch (key) {
            case "gr": // 供热
                URL_BASE =
                    "http://172.16.131.11:8090/iserver/services/map-GongReGongZuoKongJian/wms111/";
                addLayerGR(gr, key, URL_BASE);
                break;
            case "rq": // 燃气
                URL_BASE =
                    "http://172.16.131.11:8090/iserver/services/map-GAS_TEST/wms111/";
                addLayerRQ(ids[key], URL_BASE);
                break;
            default:
                break;
        }
        // 添加wms
        addWMS(key);
    });
};
// 供热拼接url
const addLayerGR = (el, key, base) => {
    el.forEach((element) => {
        element.url =
            base +
            element.name +
            "?SERVICE=WMS&VERSION=1.1.1&REQUEST=GetMap&FORMAT=image/png&TRANSPARENT=true&LAYERS=" +
            ids[key] +
            "&SRS=EPSG%3A4326&WIDTH=256&HEIGHT=256&STYLES=&BBOX=[b]";
    });
};
// 燃气拼接url
const addLayerRQ = (el, base) => {
    el.forEach((element) => {
        rq.push({
            name: element,
            url:
                base +
                element +
                "?SERVICE=WMS&VERSION=1.1.1&REQUEST=GetMap&FORMAT=image/png&TRANSPARENT=true&LAYERS=0&SRS=EPSG%3A4326&WIDTH=256&HEIGHT=256&STYLES=&BBOX=[b]",
        });
    });
};
// 添加wms
const addWMS = (a) => {
    switch (a) {
        case "gr": // 供热
            // 天津热电
            gr_tjrd = BMapGL.XYZLayer({
                tileUrlTemplate: gr[0].url,
            });
            mapStore.map.addTileLayer(gr_tjrd);
            // 津安热电
            gr_jard = BMapGL.XYZLayer({
                tileUrlTemplate: gr[1].url,
            });
            mapStore.map.addTileLayer(gr_jard);
            break;
        case "rq": // 燃气
            rq.forEach((element) => {
                if (element.name === "场站") {
                    rq_cz = BMapGL.XYZLayer({
                        tileUrlTemplate: element.url,
                    });
                    mapStore.map.addTileLayer(rq_cz);
                }
                if (element.name === "阀门") {
                    rq_fm = BMapGL.XYZLayer({
                        tileUrlTemplate: element.url,
                    });
                    mapStore.map.addTileLayer(rq_fm);
                }
                if (element.name === "计量设施") {
                    rq_jl = BMapGL.XYZLayer({
                        tileUrlTemplate: element.url,
                    });
                    mapStore.map.addTileLayer(rq_jl);
                }
                if (element.name === "调压设施") {
                    rq_ty = BMapGL.XYZLayer({
                        tileUrlTemplate: element.url,
                    });
                    mapStore.map.addTileLayer(rq_ty);
                }
                if (element.name === "燃气管线_西青") {
                    rq_gx = BMapGL.XYZLayer({
                        tileUrlTemplate: element.url,
                    });
                    mapStore.map.addTileLayer(rq_gx);
                }
            });
            break;
        default:
            break;
    }
};

// 清空wms
const clearWMS = () => {
    // 还原ids
    ids = {
        gr: [],
        rq: [],
    };
    rq = [];
    if (!mapStore.map) {
        return;
    }
    mapStore.map.removeTileLayer(gr_tjrd);
    mapStore.map.removeTileLayer(gr_jard);
    mapStore.map.removeTileLayer(rq_cz);
    mapStore.map.removeTileLayer(rq_fm);
    mapStore.map.removeTileLayer(rq_jl);
    mapStore.map.removeTileLayer(rq_ty);
    mapStore.map.removeTileLayer(rq_gx);
    gr_tjrd = null;
    gr_jard = null;
    rq_cz = null;
    rq_fm = null;
    rq_jl = null;
    rq_ty = null;
    rq_gx = null;
};

// // 获取当前选中节点
// const getCheckedNodes = () => {
//     checkedValue.value = [];
//     // 已选图层名
//     let layers = [];
//     treeRef.value.getCheckedNodes(false, false).forEach((element) => {
//         if (!element?.children) {
//             checkedValue.value.push(element.value);
//         }
//     });
//     // 数组分类
//     layers = groupBy(checkedValue.value, (item) => item.name);
//     wms(layers);
// };
// // 添加wms图层
// const wms = (layers) => {
//         // wms图层
//         const wmsLayers = ref()
//     layers.forEach((element) => {
//         let ids = [];
//         element.items.forEach((item) => {
//             ids.push(item.layers);
//         });
//         let url =
//             element.key +
//             "?SERVICE=WMS&VERSION=1.1.1&REQUEST=GetMap&FORMAT=image/png&TRANSPARENT=true&LAYERS=" +
//             ids +
//             "&SRS=EPSG%3A4326&WIDTH=256&HEIGHT=256&STYLES=&BBOX=[b]";
//         mapStore.addWMS(url);
//     });
// };
</script>
<template>
    <div></div>
</template>
